<template>
    <van-form>
        <h2 class="form-group-label">
            基本配置
        </h2>
        <van-field
                v-model="data.label"
                label="名称"
                :rules="[{ required: true, message: '请填写名称' }]"
        />
        <van-field label="类型">
            <template #input>
                <van-radio-group v-model="data.type" direction="horizontal">
                    <van-radio name="text">文字</van-radio>
                    <van-radio name="number">数字</van-radio>
                    <van-radio name="textarea">文本域</van-radio>
                </van-radio-group>
            </template>
        </van-field>
        <van-field label="重复校验" right-icon="warning-o">
            <template #input>
                <van-radio-group v-model="data.repeatCheck" direction="horizontal">
                    <van-radio name="0">否</van-radio>
                    <van-radio name="1">是</van-radio>
                </van-radio-group>
            </template>
            <template #right-icon>
                <a-tooltip placement="left" :arrowPointAtCenter="true" :autoAdjustOverflow="true" title="当前字段如果被重复提交会出现错误提示">
                    <van-icon name="warning-o" />
                </a-tooltip>
            </template>
        </van-field>
        <van-field label="是否必填">
            <template #input>
                <van-radio-group v-model="required" direction="horizontal">
                    <van-radio name="0">否</van-radio>
                    <van-radio name="1">是</van-radio>
                </van-radio-group>
            </template>
        </van-field>
        <van-field v-if="this.data.required === 1"
                v-model="data.emptyTips"
                placeholder="当该字段为空时的错误提示"
                label="为空提示"
                width="120px"
        >
        </van-field>
        <van-field label="占位提示语" placeholder="当该字段为空时的默认提示" v-model="data.placeHolder" />
        <van-field label="最大字数" type="digit" v-model="data.maxLength" >
            <template #right-icon>
                <a-tooltip placement="left" :arrowPointAtCenter="true" :autoAdjustOverflow="true" title="如果为 0 则表示不限制">
                    <van-icon name="warning-o" />
                </a-tooltip>
            </template>
        </van-field>
        <van-field label="校验规则">
            <template #input>
                <van-radio-group v-model="rule">
                    <van-radio  style="margin-bottom: 8px" v-for="(item, index) in validateRules" :key="index" :name="index">{{ item.name }}</van-radio>
                </van-radio-group>
            </template>
        </van-field>
        <Del :id="data.id"></Del>
    </van-form>
</template>
<script>
    import Del from './../../common/del'
    import validateRules from './validates'
    export default {
        components: {
            Del
        },
        data() {
            return {
                validateRules
            }
        },
        props: {
            data: Object
        },
        methods : {

        },
        computed: {
            rule:{
                get(){
                    let _this = this
                    let i = 0;
                    validateRules.forEach(function (rule, index) {
                        if (_this.data.validateCode !== null && rule.code === _this.data.validateCode){
                            i = index;
                        }
                    });
                    return i
                },
                set(value){
                    if(value === 0){
                        this.data.validateCode = ''
                    }else{
                        let rl = validateRules[ value ];
                        this.data.validateCode = rl.code;
                    }
                }
            },
            required: {
                get() {
                    return this.data.required + ''
                },
                set(value){
                    this.data.required = Number(value)
                }
            },
            onlyInteger: {
                get() {
                    return this.data.numberConfig.onlyInteger + ''
                },
                set(value){
                    this.data.numberConfig.onlyInteger = Number(value)
                }
            },
            rangeMin : {
                get() {
                    return this.data.numberConfig.range.min
                },
                set(value){
                    let n = Number(value);
                    this.data.numberConfig.range.min = isNaN(n) ? 0 : n
                }
            },
            rangeMax:{
                get() {
                    return this.data.numberConfig.range.max
                },
                set(value){
                    let n = Number(value);
                    this.data.numberConfig.range.max = isNaN(n) ? 0 : n
                }
            }
        }
    }
</script>